<template>
    <el-dialog title="选择历史接收的好友" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="4vh" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="listVue">
                <div class="thVue flex">       
                    <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">任务名</div>
                    <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">发送时间</div>
                    <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">发送人数</div>  
                    <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">操作</div>     
                </div>
                <div class="tdContent">
                    <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                        <div class="li line-1" style="width: 200px; line-height: 50px; text-align: center; font-size: 13px;">{{ item.name }}</div>
                        <div class="li" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">2024-09-02 17:04:03</div>
                        <div class="li" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">100人</div>  
                        <div class="li" style="width: 200px; line-height: 50px; text-align: center; font-size: 13px;">
                            <el-button size="mini" type="detail" @click="getFriends(item.id)">好友明细</el-button>
                            <el-button size="mini" type="choose" v-if="loading && id===item.id"><span class="el-icon-loading"></span></el-button>
                            <el-button size="mini" type="choose" @click="reSend(item.id)" v-else><span>选择</span></el-button>
                        </div> 
                    </div>
                </div>
                <!-- 底部 -->
                <div class="botVue flex_center">
                    <div class="paginationVue flex_center align_center">
                        <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize"  @current-change="handlePageChange"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            pageSize: 20,
            pageNum: 1,
            total: 0,
            list: [],
            id: "",
            loading: false
        }
    },
    methods: {
        beforeClose(){
            this.$emit("beforeClose")
        },

        handlePageChange(val){
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },

        getList(id, name){
            this.$post("/front/timing/selectList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                id: id,
                wechatName: name
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                }
            })
        },

        reSend(id){
            this.id = id
            this.loading = true
            this.$post("/front/timing/friendList", {
                id: id,
                pageNum: 1,
                pageSize: 1000
            }).then(res=>{
                this.loading = false
                if(res.data.code===0) {
                    this.$store.state.selectList = res.data.obj.list
                    this.beforeClose()
                }
            })
        },

        getFriends(id){
            this.$emit("getFriends", id)
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-button--detail) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--choose) {
    background: #AAA;
    span {
        color: #fff !important;
    }
}
:deep(.el-dialog) {
    width: 60vw;
    height: 90vh;
}
:deep(.el-dialog__header) {
    padding: 20px 0 15px 0;
}
:deep(.el-dialog__body) {
    padding: 0;
}
.dialogVue {
    width: 100%;
    height: 100%;
    padding: 0 15px 0;
    .listVue {
        width: 100%;
        height: calc(90vh - 59px);
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(90vh - 149px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #f5f5f5;
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .botVue {
            width: 100%;
            height: 50px;
        }
    }
}
</style>